var $wrapper = $('.wrapper');

var viewHeight = $(window).height();
$wrapper.css('height', viewHeight); 
var viewHeight = $(window).height();

var w = $wrapper.width();
var h = $wrapper.height();
//console.log(w,h);

showLoading();
slideCanvas();
 //显示加载
 function showLoading(){
 	var arr = ['a.png', 'b.png', 'c.png', 'd.png', 'e.png', 'ad1.png', 'ad2.png', 'ad3.png', 'ad4.png', 'c1.png', 'c2.png', 'c3.png', 'c4.png', 'c5.png', 'c6.png', 'd1.png'];
	var $loading = $('#loading');
    var iNow = 0;
    for (var i = 0; i < arr.length; i++) {
      var objImg = new Image();
      objImg.src = 'img/' + arr[i];
      objImg.onload = function () {
            iNow++;
            if (iNow == arr.length) {
                $loading.animate({
                    opacity: 0
                }, 1000, function () {
                    $(this).remove();
                });
            }
       };
	    objImg.onerror = function () {
	        $loading.animate({
	            opacity: 0
	        }, 1000, function () {
	            $(this).remove();
	        });
	    };
    };
 }
 //画布
function slideCanvas(){
 	var onOff = true;
	var canvas = document.getElementById('c1');
	canvas.height = viewHeight;
	canvas.width = w;
    context = canvas.getContext('2d');  
    var newImg = new Image();
    newImg.src = 'img/a.png';    
    newImg.onload = function(){
		context.drawImage(newImg, 0, 0, w, viewHeight);
    	context.globalCompositeOperation = 'destination-out';    	   	
    	context.lineWidth = 1/9*w;
    	context.lineCap = 'round';
    	
		$('#c1').on('touchstart',function(ev){
			$('#list').eq(0).show();						
			var touch = ev.originalEvent.changedTouches[0];
            var x = touch.pageX - $(this).offset().left;
            var y = touch.pageY - $(this).offset().top;
            if (onOff) {
                onOff = false;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
            } else {
                context.lineTo(x, y);
            }
            context.stroke();           
             $('#c1').on('touchmove.move', function (ev) {
                var touch = ev.originalEvent.changedTouches[0];
                var x = touch.pageX - $(this).offset().left;
                var y = touch.pageY - $(this).offset().top;
                context.lineTo(x, y);
                context.stroke();
            });
            $('#c1').on('touchend.move', function () {
                var dataImg = context.getImageData(0, 0, w, h);
                var allPx = dataImg.width * dataImg.height;
                var iNum = 0;
                for (var i = 0; i < allPx; i++) {
                    if (dataImg.data[i * 4 + 3] == 0) {
                        iNum++;
                    }
                }
               if (iNum > allPx / 3) {
                    $('#c1').animate({
                        opacity: 0
                    }, 1000, function () {
                    	$('#arrow').show();
	                    $audio1.play();
						$('#music').addClass('active');
						$(this).remove();
						slidS();
                    });                   
                }
                $('#c1').off('.move');
              });
		});
    }   
 }
 
 //swiper滑动和动画效果
function slidS(){
	var swiper = new Swiper('.swiper-container', {
		loop:true,
		direction: 'vertical',
		autoplay: 3000,
		onSlideChangeEnd: function(swiper) {
			var mark = 0;
			var $s = $('.swiper-slide');
//			console.log($s)
			for(var i=1;i<=$s.length;i++){
			if($s.eq(i).hasClass("swiper-slide-active")){
						mark = i;
//						console.log(mark)
						break;					
				}				
			}
			//判断第一个动画
			if(mark==1||mark==4){
				$s.eq(mark).find('#s1').show();
				$s.eq(mark).find('#s1 li').eq(0).addClass('animated bounceOut').end().eq(2).addClass('animated bounceOut');
				$s.eq(mark).find('#s1 li').eq(1).addClass('animated fadeInRight').end().eq(3).addClass('animated fadeInRight');				
			}else{
				$s.eq(1).find('#s1').hide();
				$s.eq(4).find('#s1').hide();
			}
			
			//判断第二个动画
			if(mark==2){
				
				$s.eq(mark).find('#s2 li').eq(0).addClass('animated bounceOut');
				$s.eq(mark).find('#s2 li').eq(1).addClass('animated rubberBand');
				$s.eq(mark).find('#s2 li').eq(2).addClass('animated swing');
//				$s.eq(mark).find('#s2 li').eq(3).addClass('animated slideInRight');
				$s.eq(mark).find('#s2 li').eq(4).addClass('animated slideInLeft');
//				$s.eq(mark).find('#s2 li').eq(5).addClass('animated slideInDown');
			}else{
				$s.eq(2).find('#s2 li').attr('class','');
			}
			
			//判断第三个动画
			if(mark==3){
				$s.eq(mark).find('#s3 li').eq(0).addClass('animated bounceOut');
				$s.eq(mark).find('#s3 li').eq(1).addClass('animated rotateIn');
			
			}else{
				$s.eq(3).find('#s3 li').attr('class','');
			}
			//判断第四个动画
			if(mark==4){
				$s.eq(mark).find('li').addClass('animated zoomInLeft');
			}else{
				$s.eq(4).find('li').attr('class','');
			}
		}
	    
	});
 }
 
//音乐播放和暂停
var flag = false;
var $audio1 = document.getElementById('audio1');
$('#music').on('click',function(){
	if(flag){
		$audio1.play();
		$(this).addClass('active');
	}else{
		$audio1.pause();
		$(this).removeClass('active');
	}
	flag = !flag;
});





